<template>
  <div class="contact-page">
    <!-- 好友列表 -->
    <ContactListPanel
      class="contact-list-panel"
      type="friend"
    ></ContactListPanel>

    <!-- 好友详情 -->
    <UserDetailView
      class="contact-detail-container"
      :user="sharedContactState.currentFriend"
      v-if="sharedContactState.currentFriend"
    ></UserDetailView>

    <div v-else class="contact-empty-container">
      <h1>^~^</h1>
    </div>
  </div>
</template>

<script>
import ContactListPanel from './ContactListPanel.vue'
import UserDetailView from './contact/UserDetailView.vue'
import store from '../../store'

export default {
  name: 'FriendPage',
  data() {
    return {
      sharedContactState: store.state.contact,
    }
  },
  components: {
    ContactListPanel,
    UserDetailView,
  },
}
</script>

<style lang="css" scoped>
.contact-page {
  display: flex;
  flex: 1;
  height: 100%;
}

.contact-list-panel {
  width: 261px;
  height: 100%;
  background-color: var(--color-white);
}

ul {
  list-style: none;
}

.contact-detail-container {
  flex: 1;
  background-color: white;
}

.contact-empty-container {
  flex: 1;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: var(--main-border-radius);
  border-bottom-right-radius: var(--main-border-radius);
}

.contact-empty-container h1 {
  font-size: 17px;
  font-weight: normal;
}
</style>
